<template>
	<view>
		<view class="order-title">
			<view class="row row-between-wrapper order-item bottom-line">
				<view class="row row-middle">
					<image class="img-icon" src="../../static/img/my_order_info/money.png"></image>
					<view>
						合计：<text class="icon-color">￥{{orderDetails.totalAmount}}</text><text class="gray-color">(00小时29分关闭)</text>
					</view>
				</view>
				<view class="icon-color" v-if="orderDetails.status === 1">待付款</view>
				<view v-else-if="orderDetails.status === 2 || orderDetails.status === 3">已付款</view>
				<view v-else-if="orderDetails.status === 4">已发货</view>
				<view v-else-if="orderDetails.status === 5">已完成</view>
				<view v-else-if="orderDetails.status === 6">已关闭</view>
				<view class="icon-color" v-else-if="orderDetails.status === 7">退款中</view>
				<view class="gray-color" v-else-if="orderDetails.status === 8">退款完成</view>
			</view>
			<view class="order-address">
				<view>{{orderDetails.addressName}} {{orderDetails.addressMobile}}</view>
				<view class="line2">{{orderDetails.addressAddress}}</view>
			</view>
		</view>
		<view class="order-title">
			<view class="row row-middle bottom-line goods-info-box" v-for="(item,index) in orderDetails.shoppingDetails" :key="index">
				<image :src="item.goodsSku.image"></image>
				<view class="goods-info-right">
					<view class="line2 goods-item1">{{item.goodsName}}</view>
					<view class="line1 goods-item2">{{item.goodsSku.skuName}}</view>
					<view class="row row-between-wrapper goods-item3">
						<text class="icon-color">￥{{item.goodsSkuPrice}}</text>
						<text class="gray-color">×{{item.goodsSkuNum}}</text>
					</view>
				</view>
			</view>
			<view class="count-box">共{{totalNum}}件商品  合计：<text class="icon-color">￥{{orderDetails.totalAmount}}</text></view>
			<view class="count-box" v-if="orderDetails.coupon">优惠：<text class="icon-color">￥{{orderDetails.coupon.lessMoney}}</text></view>
		</view>
		<view class="order-title">
			<view>订单编号: {{orderDetails.orderId}}</view>
			<view v-if="orderDetails.orderType === 2">服务方式: 快递配送</view>
			<view v-if="orderDetails.orderType === 3">服务方式: 到店服务</view>
			<view>下单时间: {{orderDetails.orderTime}}</view>
		</view>
		<view class="after-box"></view>
		<view class="order-tabbar row row-between-wrapper">
			<view class="row row-center-wrapper order-tabbar-left">
				<view class="home-box row row-column row-middle" @click="backHome">
					<image src="../../static/img/my_order_info/tabbar_home.png" class="icon-img"></image>
					<view>首页</view>
				</view>
			</view>
			<image src="../../static/img/my_order_info/order_pay.png" class="pay-img"></image>
		</view>
	</view>
</template>

<script>
import http from '../../api/api.js';
import imgUrl from '../../static/js/config.js';
export default {
	data: function() {
		return {
			userId:uni.getStorageSync('userId'),
			orderDetails:{},
			totalNum:0
		}
	},
	onLoad(option){
		if(option.orderId){
			this.init({orderId:option.orderId,userId:this.userId})
		}
	},
	methods: {
		init(data){
			http.getOrderDetails(data).then(res => {
				if(res.data.code === 1){
					this.orderDetails = res.data.data;
					this.orderDetails.shoppingDetails.forEach(item => {
						item.goodsSku.image = `${imgUrl.IMG_URL + item.goodsSku.image}`;
					});
					this.totalNum = this.orderDetails.shoppingDetails.map(item => item.goodsSkuNum).reduce((total,num) => total + num)
				}
			})
		},
		backHome(){
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
@import '../../common/mixins';
	.order-title{
		@include box;
		padding-top: 20upx;
		padding-bottom: 20upx;
		}
		.after-box{
			height: 200upx;
		}
		.order-item{
			height: 100upx;
		}
	.order-address{
		:first-child{
			height: 70upx;
			line-height: 70upx;
			font-weight: 600;
			& + view{
				height: 100upx;
			}
		}
	}
	.goods-info-box{
		height: 260upx;
		>image{
			width: 150upx;
			height: 150upx;
			display: block;
			border: 1upx solid #E3E3E3;
			box-shadow: 0 0 2upx #E3E3E3;
		}
	}
	.goods-info-right{
		margin-left: 20upx;
		width: calc(100% - 172upx);
	}
	.goods-item1{
		height: 100upx;
		font-weight: 600;
	}
	.goods-item2{
		height: 50upx;
	}
	.goods-item3{
		height: 50upx;
	}
	.count-box{
		height: 100upx;
		text-align: right;
		line-height: 100upx;
		:last-child{
			font-size: 30upx;
		}
	}
	.order-tabbar{
		padding: 0 40upx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100upx;
	}
	.order-tabbar-left{
		width: calc(50% - 40upx);
	}
	.icon-img{
		display: block;
		width: 48upx;
		height: 48upx;
	}
	.pay-img{
		width: 300upx;
		height: 80upx;
	}
	.home-box{
		align-content: center;
		width: 100upx;
		height: 100upx;
	}
</style>
